if (typeof gonu == 'undefined') { gonu = {}; }
if (typeof gonu.play == 'undefined') { gonu.play = {}; }

gonu.play.viewHobak = {
	_oBoardCtx : null,
	stage : null,
	layer : null,
	circleRed1 : null,
	circleRed2 : null,
	circleRed3 : null,
	circleBlue1 : null,
	circleBlue2 : null,
	circleBlue3 : null,
	_playRocks : [],
	
	x : 25,
	y : 25,
	basicDistance : 100,
	shortDistance : 50,
	rockRadius : 24,
	marginX : 0,
	marginY : 0,
	
	_chnlNumber : null,
	_order : null,
	_name : null,
	_moveCircles : [],
	_moveRock : null,
	_isClickRock : false, 
	
	init : function (playStatus, chnlNumber, order, name){
		var size = $Document().scrollSize();
		this.marginX = (size.width - 250)/2;
	    if (this.marginX<1) {
	    	this.marginX = 1;
	    }
	    this.marginY = (size.height - 350)/2;
	    if (this.marginY<1) {
	    	this.marginY = 1;
	    }
	    
	    
	    this.x = this.x + this.marginX;
	    this.y = this.y + this.marginY;
	    
		this._order = order;
		this._name = name;
		this._chnlNumber = chnlNumber;
		this._drawBoard();
		this._drawRock(playStatus);
		this._playCheck();
	},
	_drawBoard : function () {
		var size = $Document().scrollSize();
	    this.stage = new Kinetic.Stage({
	    	container: 'container',
	        width: (size.width> 250) ? size.width:250,
	        height: (size.height> 350) ? size.height:350
	      });
			
		this.layer = new Kinetic.Layer();
		
		var lineTop = new Kinetic.Line({
	        points: [this.x, this.y, this.x+2*this.basicDistance, this.y],
	        stroke: 'black',
	        strokeWidth: 1
	      });
		
		var lineMiddle = new Kinetic.Line({
	        points: [this.x, this.y+this.basicDistance+this.shortDistance, this.x+2*this.basicDistance, this.y+this.basicDistance+this.shortDistance],
	        stroke: 'black',
	        strokeWidth: 1
	      });
		
		var lineCenter = new Kinetic.Line({
	        points: [this.x+this.basicDistance, this.y, this.x+this.basicDistance, this.y+2*this.basicDistance+2*this.shortDistance],
	        stroke: 'black',
	        strokeWidth: 1
	      });
		
		var lineBottom = new Kinetic.Line({
	        points: [this.x, this.y+2*this.basicDistance+2*this.shortDistance, this.x+2*this.basicDistance, this.y+2*this.basicDistance+2*this.shortDistance],
	        stroke: 'black',
	        strokeWidth: 1
	      });
		
		var lineCircle = new Kinetic.Circle({
	        x: this.x+this.basicDistance,
	        y: this.y+this.basicDistance+this.shortDistance,
	        radius: this.basicDistance,
	        stroke: 'black',
	        strokeWidth: 1
	      });
		
		this.layer.add(lineTop);
		this.layer.add(lineMiddle);
		this.layer.add(lineCenter);
		this.layer.add(lineBottom);
		this.layer.add(lineCircle);
	},
	_drawRock : function (playStatus) {
		var self = this;
		this.circleRed1 = new Kinetic.Circle({
	        x: playStatus.playRocks[0].path.x + self.marginX,
	        y: playStatus.playRocks[0].path.y + self.marginY,
	        radius: this.rockRadius,
	        fill: 'red'
	      });
		this._playRocks.push(this.circleRed1);
		
		this.circleRed2 = new Kinetic.Circle({
	        x: playStatus.playRocks[1].path.x + self.marginX,
	        y: playStatus.playRocks[1].path.y + self.marginY,
	        radius: this.rockRadius,
	        fill: 'red'
	      });
		this._playRocks.push(this.circleRed2);
		
		this.circleRed3 = new Kinetic.Circle({
	        x: playStatus.playRocks[2].path.x + self.marginX,
	        y: playStatus.playRocks[2].path.y + self.marginY,
	        radius: this.rockRadius,
	        fill: 'red'
	      });
		this._playRocks.push(this.circleRed3);
		
		this.circleRed4 = new Kinetic.Circle({
	        x: playStatus.playRocks[3].path.x + self.marginX,
	        y: playStatus.playRocks[3].path.y + self.marginY,
	        radius: this.rockRadius,
	        fill: 'red'
	      });
		this._playRocks.push(this.circleRed4);
		
		this.circleBlue1 = new Kinetic.Circle({
	        x: playStatus.playRocks[4].path.x + self.marginX,
	        y: playStatus.playRocks[4].path.y + self.marginY,
	        radius: this.rockRadius,
	        fill: 'blue'
	      });
		this._playRocks.push(this.circleBlue1);
		
		this.circleBlue2 = new Kinetic.Circle({
	        x: playStatus.playRocks[5].path.x + self.marginX,
	        y: playStatus.playRocks[5].path.y + self.marginY,
	        radius: this.rockRadius,
	        fill: 'blue'
	      });
		this._playRocks.push(this.circleBlue2);
		
		this.circleBlue3 = new Kinetic.Circle({
	        x: playStatus.playRocks[6].path.x + self.marginX,
	        y: playStatus.playRocks[6].path.y + self.marginY,
	        radius: this.rockRadius,
	        fill: 'blue'
	      });
		this._playRocks.push(this.circleBlue3);
		
		this.circleBlue4 = new Kinetic.Circle({
	        x: playStatus.playRocks[7].path.x + self.marginX,
	        y: playStatus.playRocks[7].path.y + self.marginY,
	        radius: this.rockRadius,
	        fill: 'blue'
	      });
		this._playRocks.push(this.circleBlue4);
		
		this._initEvents();
		
		this.layer.add(this.circleRed1);
		this.layer.add(this.circleRed2);
		this.layer.add(this.circleRed3);
		this.layer.add(this.circleRed4);
		this.layer.add(this.circleBlue1);
		this.layer.add(this.circleBlue2);
		this.layer.add(this.circleBlue3);
		this.layer.add(this.circleBlue4);
		this.stage.add(this.layer);
		
	},
	_initEvents : function () {
		var self = this;
		this.circleRed1.on('click touchstart', function(e) {
			if (self._order == "BLUE") {
				alert("당신은  BLUE입니다.");
			}
			self._moveRock = self.circleRed1;
			self._drawMovePath(1);
	      });
		this.circleRed2.on('click touchstart', function() {
			if (self._order == "BLUE") {
				alert("당신은  BLUE입니다.");
			}
			self._moveRock = self.circleRed2;
			self._drawMovePath(2);
	      });
		this.circleRed3.on('click touchstart', function() {
			if (self._order == "BLUE") {
				alert("당신은  BLUE입니다.");
			}
			self._moveRock = self.circleRed3;
			self._drawMovePath(3);
	      });
		this.circleRed4.on('click touchstart', function() {
			if (self._order == "BLUE") {
				alert("당신은  BLUE입니다.");
			}
			self._moveRock = self.circleRed4;
			self._drawMovePath(4);
	      });
		this.circleBlue1.on('click touchstart', function() {
			if (self._order == "RED") {
				alert("당신은  RED입니다.");
			}
			self._moveRock = self.circleBlue1;
			self._drawMovePath(5);
	      });
		this.circleBlue2.on('click touchstart', function() {
			if (self._order == "RED") {
				alert("당신은  RED입니다.");
			}
			self._moveRock = self.circleBlue2;
			self._drawMovePath(6);
	      });
		this.circleBlue3.on('click touchstart', function() {
			if (self._order == "RED") {
				alert("당신은  RED입니다.");
			}
			self._moveRock = self.circleBlue3;
			self._drawMovePath(7);
	      });
		this.circleBlue4.on('click touchstart', function() {
			if (self._order == "RED") {
				alert("당신은  RED입니다.");
			}
			self._moveRock = self.circleBlue4;
			self._drawMovePath(8);
	      });
		
	},
	_playCheck : function () {
		var self = this;
		var o = new jindo.Timer(); 
		var repeatCurrentCounter=0;
		o.start(function() { 
			var checkUrl = "/gonu/play/api/playCheck.json?chnlNumber=" + self._chnlNumber;
			var ajax = $Ajax(checkUrl, {
				type : 'xhr',
		        method : 'get', 
		        async : false,
		        onload : function(res) {
		        	repeatCurrentCounter--;
		            if(!!res){
						var response = res.json();
						var message = response.message;
						if(message == "ok"){
							alert(response.alarm);
							o.abort();
							self._isClickRock = true;
							self._deletePlayRocks();
							self._drawRock(response.playStatus);
						} else if (message == "end") {
							alert(response.alarm);
							o.abort();
							self._isClickRock = true;
							self._deletePlayRocks();
							self._drawRock(response.playStatus);
							
							for (var i=0; i < self._playRocks.length; i++) {
								self._playRocks[i].off("click touchstart");
							}
							
							if(confirm("게임채널에서 나가시겠습니까?")) {
								if (response.isPVC) {
									location.href="/gonu/home.gonu";
								} else {
									location.href="/gonu/play/chnlSelect.gonu?name="+self._name;
								}
							}
						}		
						
					} 
		        }
		    });
			
			if(repeatCurrentCounter < 2) {
				ajax.request();
				repeatCurrentCounter++;
			}
			
			return true;
		}, 1000);
	},
	_drawMovePath : function (number) {
		var checkUrl = "/gonu/play/api/movePath.json?rockNumber=" + number + "&chnlNumber=" + this._chnlNumber;
		var self = this;
		self._deleteMoveCircles();
		var ajax = $Ajax(checkUrl, {
			type : 'xhr',
	        method : 'get', 
	        async : false,
	        onload : function(res) {
	            if(!!res){
					var response = res.json();
					var message = response.message;
					if(message == "ok"){
						for(var i=0; i < response.movePath.length; i++){
							
							var moveCircle = new Kinetic.Circle({
						        x: response.movePath[i].x + self.marginX,
						        y: response.movePath[i].y + self.marginY,
						        radius: self.rockRadius,
						        fill: self._order,
						        opacity: 0.5
							});
							
							moveCircle.on('click touchstart', function() {
								var selfCircle = this;
								var anim = new Kinetic.Animation(function(frame) {
									self._moveRock.setX( selfCircle.getX());
									self._moveRock.setY(selfCircle.getY());
									}, self.layer);

								anim.start();
								anim.stop();
								    
								self._moveRockRequest(number, selfCircle.getX(), selfCircle.getY());
								    
								self._deleteMoveCircles();
								    
								self.layer.draw();
								self._playCheck();
							});
							
							self._moveCircles.push(moveCircle);
							self.layer.add(moveCircle);
							self.layer.draw();
						}
					} else {
						self._deleteMoveCircles();
					    
						self.layer.draw();
					}		
				} 
	        }
		});
		ajax.request();
	},
	_deletePlayRocks : function () {
		for (var i=0; i < this._playRocks.length; i++) {
			var circle = this._playRocks[i];
			circle.off("click touchstart");
			circle.remove();
		}
		this._playRocks=[];
	},
	_deleteMoveCircles : function () {
		for (var i=0; i < this._moveCircles.length; i++) {
			var circle = this._moveCircles[i];
			circle.off("click touchstart");
			circle.remove();
		}
		this._moveCircles=[];
	},
	_moveRockRequest : function (number, x, y) {
		var tempX = x-this.marginX;
		var tempY = y-this.marginY;
		var moveRockUrl = "/gonu/play/api/moveRock.json?rockNumber="+number+"&chnlNumber="+this._chnlNumber+"&x="+ tempX +"&y="+ tempY;
	    var ajaxMoveRock = $Ajax(moveRockUrl, {
			type : 'xhr',
	        method : 'get', 
	        async : false,
	        onload : function(res) {
	        	if(!!res){
	        		var response = res.json();
	        		var message = response.message;
	        		if(message != "ok"){
	        			location.href = "/gonu/play/view.gonu";
	        		}
	        	}
	        }
	    });
	    ajaxMoveRock.request();
	}
}